<template>
  <NuxtLayout name="uni" title="损伤详情" :subTitle="subTitle">
    <div class="main">
      <div class="top">
        <div class="top__action flex-right pr-4 mb-2">
          <el-button type="primary">导出</el-button>
          <el-button type="danger">删除</el-button>
        </div>
      </div>
      <div class="content">
        <ClientOnly>
          <el-table :data="summaryResult" style="width: 100%" border>
            <el-table-column type="selection" />
            <el-table-column prop="id" label="ID" width="180">
              <template #default="scope">
                <span style="overflow: hidden; text-overflow: ellipsis" class="whitespace-nowrap">{{ scope.row.id
                  }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="originImgUrl" label="图片" width="140">
              <template #default>
                <el-image src="/img/222.jpg" style="height: 60px; width: 100%" fit="cover"></el-image>
              </template>
            </el-table-column>

            <el-table-column prop="buildingMaterial" label="材料" />

            <el-table-column prop="damageSummary" label="损伤概述" />
            <el-table-column prop="createTime" label="上传时间" />
            <el-table-column width="120">
              <template #default="scope">
                <ElButton @click="handleClickShowDetails(scope.row.id)" class="w-h-full">
                  查看详情
                </ElButton>
              </template>
            </el-table-column>
          </el-table>
        </ClientOnly>
      </div>
    </div>
  </NuxtLayout>
</template>

<script lang="ts" setup>
import { NuxtLayout } from "#components";
definePageMeta({
  layout: false,
});

interface DamageSummary {
  id: string;
  buildingMaterial: string;
  originImgUrl: string;
  createTime: string;
  damageSummary: string;
}

const route = useRoute();

const ToPicture = () => {
  navigateTo(`/project/details-${route.params.id}/detectResult-10`);
};

const subTitle = ref("上海音乐厅");

const summaryResult = reactive<DamageSummary[]>([
  {
    id: "112313213213",
    buildingMaterial: "材料132",
    originImgUrl: "/img/111.png",
    createTime: "2025/6/9",
    damageSummary: "损伤概述",
  },
  {
    id: "112313213213",
    buildingMaterial: "材料132",
    originImgUrl: "/img/111.png",
    createTime: "2025/6/9",
    damageSummary: "损伤概述",
  },
]);

const handleClickShowDetails = async (id: string) => {
  await navigateTo(`/project/details-${route.params.id}/detectResult-${id}`);
};
</script>

<style lang="scss" scoped>
@mixin block($block) {
  .#{$block} {
    @content;
  }
}

@mixin element($element) {
  &__#{$element} {
    @content;
  }
}

@mixin modifier($modifier) {
  &--#{$modifier} {
    @content;
  }
}

@include block("main") {
  flex-direction: column;
  min-width: 1300px;
  @apply w-full h-full p-4;
}

@include block("top") {
  width: 100%;
  height: 10%;
  @apply flex flex-col;

  @include element("action") {
    width: 100%;
    flex: 1;
  }
}

@include block("content") {
  width: 100%;
  height: 90%;
}

:deep(.el-table th) {
  background-color: rgb(245, 247, 250);
}
</style>
